<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/head.jsp"%>
</head>
<body>
	<div style="width: 87%; margin-top: 30px;">
		<form class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label"><text style="color: red;">*</text>标题</label>
				<div class="layui-input-block">
					<input type="text" name="title" required lay-verify="required"
						placeholder="请输入文章标题" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><text style="color: red;">*</text>关键字</label>
				<div class="layui-input-block">
					<input type="text" name="key" required lay-verify="required"
						placeholder="请输入文章关键字" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><text style="color: red;">*</text>类别</label>
				<div class="layui-input-block">
					<select name="typeId" lay-search required lay-verify="required">
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><text style="color: red;">*</text>作者</label>
				<div class="layui-input-block">
					<select name="WritterAccount" lay-search required lay-verify="required">
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><text style="color: red;">*</text>文件</label>
				<div class="layui-input-block">
					<button type="button" class="layui-btn" id="w">
						<i class="layui-icon">&#xe67c;</i>选择文件
					</button>
					<button type="button" class="layui-btn" id="a">
						<i class="layui-icon">&#xe67c;</i>上传文件
					</button>
					<hr>
					<label id="fileName">未选择</label> <label id="flag"
						style="color: red;"></label>
				</div>
			</div>
			
			<input type="hidden" name="url" value="" required lay-verify="required">
			<input type="hidden" name="fileName" value="" required lay-verify="required">
			
			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<textarea name="message" placeholder="请输入" class="layui-textarea"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label"><text style="color: red;">*</text>时间</label>
				<div class="layui-input-block">
					<input name="time" type="text" class="layui-input" id="time" required lay-verify="required">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="button" class="layui-btn" lay-submit lay-filter="submit" value="立即提交"></input>
					<input type="reset" class="layui-btn layui-btn-primary" value="重置"></input>
				</div>
			</div>
			
			<input type="hidden" name="action" value="add">
		</form>

		<script type="text/javascript">
// 		添加功能
		formOnSubmit('submit', 'text', '/ArticleServlet', function(res){
			if(res=="success"){
				layer.msg("添加成功", {
					time : 1000,
					icon : 6
				}, frameClose)
			}else{
				layer.msg("添加失败", {
					time : 1000,
					icon : 5
				})
			}
		})
		
			laydate.render({
				elem : '#time'
			});

			upload.render({
				elem : '#w',
				url : '/article/ArticleUploadServlet',
				accept : 'file',
				auto : false,
				exts : 'txt|doc|hlp|wps|rtf|html|pdf|docx',
				bindAction : '#a',
				choose : function(obj) {
					obj.preview(function(index, file, result) {
						console.log(file);
						$('#flag').html('未上传')
						$('#fileName').html(file.name)
						$('input[name="fileName"]').val(file.name)
					})
				},
				done : function(res) {
					$('input[name="url"]').val(res.file[0])
					$('#flag').html('上传成功')
				},
				error : function(res) {
					$('#flag').html('上传失败')
				}
			});

			ajax('/ArticleTypeServlet', 'json', {
				action : 'getAll'
			}, function(res) {
				console.log(res)
				var html = '<option value="">请选择类型 可输入</option>'
				$.each(res, function(i, dom) {
					html += '<option value="'+dom.id+'">' + dom.name
							+ '</option>'
				})
				$('select[name="typeId"]').html(html)
				form.render('select')
			})
			
			ajax('/WriterServlet', 'json', {
				action : 'getAll'
			}, function(res) {
				var html = '<option value="">请选择作者 可输入</option>'
				$.each(res, function(i, dom) {
					html += '<option value="'+dom.account+'">' + dom.penName
							+ '</option>'
				})
				$('select[name="WritterAccount"]').html(html)
				form.render('select')
			})
			
		</script>
</body>
</html>